<template>
  <div class="todayHomepage">
    <div class="left">
      <!-- Department ：  科室 -->
      <el-select v-model="value"
                 class="Department"
                 placeholder="请选择">
        <el-option v-for="item in options"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
      <!-- 下方的导航菜单 -->
      <el-menu default-active="2"
               class="el-menu-vertical-demo">
        <el-menu-item index="4">
          <span slot="title">李医生</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 中间区域 -->
    <div class="main">
      <!-- 中间区域的上方部分 -->
      <div class="main-top">
        李医生
        <el-button class="btn"
                   type="primary">出诊</el-button>
        <el-time-picker is-range
                        v-model="value1"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围">
        </el-time-picker>
      </div>
      <el-table :data="appointmentInfo"
                height="250"
                border
                style="width: 100%">
        <el-table-column prop="time"
                         label="时间"
                         width="180">
        </el-table-column>
        <el-table-column class="el-table-column"
                         label="日期"
                         width="200">
          <template slot-scope="scope"
                    class="scope">

            {{scope.row.name}}
            <br>
            {{scope.row.phoneNumber}}
          </template>
        </el-table-column>

        <el-table-column prop="appointmentInfo"
                         label="状态更改">
          <el-table-column>
            <template slot-scope="scope"
                      class="scope">
              <el-button > <i class="el-icon-alarm-clock"></i>签到</el-button>
              <!-- <el-button> <i class="el-icon-edit"></i>测量</el-button> -->
              <!-- Form -->
              <el-button type="text"
                         @click="dialogFormVisible = true">
                <el-button> <i class="el-icon-edit"></i>测量</el-button>
              </el-button>

              <el-dialog title="详细信息"
                         :visible.sync="dialogFormVisible">
                <el-form :model="condition">
                  <el-form-item label="身高"
                                :label-width="formLabelWidth">
                    <el-input v-model="condition.stature"
                              autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="体重"
                                :label-width="formLabelWidth">
                    <el-input v-model="condition.weight"
                              autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="体温"
                                :label-width="formLabelWidth">
                    <el-input v-model="condition.temperature"
                              autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="血压"
                                :label-width="formLabelWidth">
                    <el-input v-model="condition.DBP"
                              autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="心率"
                                :label-width="formLabelWidth">
                    <el-input v-model="condition.SBP"
                              autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer"
                     class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary"
                             @click="save">确 定</el-button>
                </div>
              </el-dialog>
              &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
              <router-link to='/home/reservation/Detail'>
                <el-button> <i class="el-icon-document"></i>详情</el-button>
              </router-link>
              <el-button @click="nextpatient"> <i class="el-icon-close"></i>取消</el-button>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState, mapActions,mapMutations } from 'vuex'
export default {
  name: 'today',
  data () {
    return {
      condition: {
        stature: '',
        weight: '',
        temperature: '',
        DBP: '',
        SBP: ''
      },
      // 显示与隐藏
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      value: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
    }
  },
  computed: {
    ...mapState({
      appointmentInfo: (state) => state.appointment.appointmentInfo
    })
  },
  mounted () {

  },
  methods: {
    ...mapMutations([
      "nextpatient"
    ]),

    save () {
      this.$store.commit('getAppointmentInfo', this.condition)
      console.log(this.condition);
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang='less' rel='stylesheet/less' scoped>
.todayHomepage {
  width: 100%;
  height: 800px;
  // background-color: saddlebrown;
  display: flex;
  .left {
    width: 200px;
    height: 500px;
    // background-color: #bfa;
    margin-top: 10px;
    // Departmentk: 科室
    .Department {
      margin-top: 10px;
    }
    // 科室下方当行
    .el-menu-vertical-demo {
      margin-top: 10px;
    }
  }

  // 右侧
  .main {
    width: 981px;
    height: 500px;
    // background-color: rosybrown;
    margin: 10px 10px;
    .main-top {
      width: 500px;
      height: 50px;
      // background-color: cadetblue;
      margin: 10px;
      font-size: 20px;
      line-height: 50px;
      .btn {
        margin-right: 10px;
      }
    }
    .main-bottom {
      margin-left: 10px;
    }
  }
}
</style>
